<template>
  <div class="bgh">
    <div 
      class="pdall" 
      style="min-height:90vh">
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label>姓名</label>
          <input 
            v-model="rgdata.realname"
            type="text"
            placeholder="请输入">
        </div>
        <div class="mui-input-row">
          <label>手机号</label>
          <input 
            v-model="rgdata.phone"
            type="text"
            placeholder="请输入">
        </div>
        <div class="mui-input-row">
          <label>性别</label>
          <span 
            v-for="(item, index) in sexoptions" 
            :key="index" 
            :class="{activesex: checkActive(item)}"
            class="sexradio"
            @click="optionsClick(item)">
            {{ item }}
          </span>
        </div>

        <div class="mui-input-row">
          <label>年龄</label>
          <input 
            v-model="rgdata.age" 
            type="text" 
            class="mui-input-clear" 
            placeholder="请输入" 
            data-input-clear="5">
          <span class="mui-icon mui-icon-clear mui-hidden"/>
        </div>
        <div class="mui-input-row">
          <label>身份证号</label>
          <input 
            v-model="rgdata.idno"
            type="text"
            class="mui-input-clear" 
            placeholder="请输入" 
            data-input-clear="5">
          <span class="mui-icon mui-icon-clear mui-hidden"/>
        </div>
        <p class="feep">
          <span>费用</span>
          <span style="color:#f60;padding-right:55%">{{ rgdata.money }}元</span>
        </p>
      </form>
      <button 
        type="button" 
        class="mui-btn mui-btn-primary bottombtn" 
        @click="doregister"
      >缴费报名</button>
    </div>

    <div 
      v-if="showts" 
      class="popdiv">
      <div class="popcontent">
        <span 
          class="mui-icon mui-icon-close popbtn" 
          @click="showts=false"/>
        <img 
          src="images/shuoming.png" 
          width="100%">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'default2',
  data() {
    return {
      ts: this.newStore(),
      rgdata: {
        money: '0'
      },
      showts: true,
      sexoptions: ['男', '女'],
      currValArr: ['男']
    }
  },
  mounted() {
    this.getrgdata()
  },
  methods: {
    getrgdata() {
      const req = {
        token: localStorage.getItem('token'),
        id: this.$route.query.id
      }
      this.spost(this.ts, '/Newindex/signUp', req).then(ts => {
        console.log(ts.d)
        this.rgdata = ts.d.data
        this.currValArr[0] = this.rgdata.sex
      })
    },
    doregister() {
      console.log(this.rgdata)

      var check = true
      mui('.mui-input-group input').each(function() {
        //若当前input为空，则alert提醒
        if (!this.value || this.value.trim() == '') {
          var label = this.previousElementSibling
          mui.toast(label.innerText + '不允许为空', {
            duration: 'short',
            type: 'div'
          })
          check = false
          return false
        }
      }) //校验通过，继续执行业务逻辑
      if (check) {
        // mui.alert('验证通过!')
        mui.confirm('确认提交申请？', '提示', e => {
          if (e.index == 1) {
            const req = {
              token: localStorage.getItem('token'),
              realname: this.rgdata.realname,
              sex: this.rgdata.sex,
              age: this.rgdata.age,
              idno: this.rgdata.idno,
              phone: this.rgdata.phone,
              id: this.$route.query.id,
              tghdnumber: this.rgdata.tghdnumber,
              tghdtoken: this.rgdata.tghdtoken
            }
            this.spost(this.ts, '/Newindex/signUpAdd', req).then(ts => {
              if (ts.d.code == '200') {
                mui.toast('提交成功', { duration: '1000', type: 'div' })
                setTimeout(() => {
                  this.$router.push({
                    name: 'fmine'
                  })
                }, 2000)
              } else {
                mui.toast('报名失败！', { duration: '1000', type: 'div' })
              }
            })
          } else {
            mui.toast('已取消', { duration: '1000', type: 'div' })
          }
        })
      }
    },
    optionsClick(item) {
      this.$set(this.currValArr, 0, item)
    },
    checkActive(item) {
      return this.currValArr.indexOf(item) !== -1
    }
  }
}
</script>

<style>
.popdiv {
  min-height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  overflow: auto;
  background: rgba(0, 0, 0, 0.4);
}
.popcontent {
  padding: 20% 10%;
}
.sexradio {
  background: #f7dcdc;
  display: inline-block;
  padding: 6px 20px;
  margin-right: 6px;
  margin-top: 7px;
  border-radius: 3px;
}
.activesex {
  background: #4c4c4c;
  color: #fff;
}
.popbtn {
  position: absolute;
  right: 15%;
  top: 13%;
  font-size: 28px;
}
.bottombtn {
  position: fixed;
  padding: 10px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.feep {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  color: #333;
}
</style>
